<template>
    <el-dialog
        @close="closeDialog('fileForm')"
        title="文件上传"
        :visible.sync="uploadVisible.visible"
        width="720px"
        :close-on-click-modal="false"
    >
        <el-form
            class="ruleForm"
            :model="fileForm"
            :rules="fileFormReuls"
            ref="fileForm"
            destroy-on-close
            label-width="120px"
            label-position="left"
        >
            <div class="w-100">
                <el-form-item class="response" label="选择文件" prop="file">
                    <el-upload
                        :http-request="Upload"
                        ref="upload"
                        drag
                        :with-credentials="true"
                        action="#"
                        :on-success="handleSuccess"
                        :on-remove="fileRemove"
                        :on-exceed="onExceed"
                        :multiple="false"
                        :limit="1"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                    </el-upload>
                </el-form-item>
                <div class="text-red">
                    提示: 报告上传前，请仔细检查，一经上传，不可修改
                </div>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="uploadVisible.visible = false"
                >关闭</el-button
            >
        </div>
    </el-dialog>
</template>

<script>
import { uploadFile, saveReportMaintain, uploadReport } from '@/api/report.js';
// 各层级
const options = [
    {
        value: 'BG_ZT',
        name: '学校总体诊改报告'
    },
    {
        value: 'BG_LEVEL_XX',
        name: '层面诊改报告'
    },
    {
        value: 'BG_JXDW',
        name: '教学单位诊改报告'
    },
    {
        value: 'BG_LEVEL_ZY',
        name: '专业层诊改报告'
    },
    {
        value: 'BG_LEVEL_KC',
        name: '课程层诊改报告'
    },
    {
        value: 'BG_LEVEL_JS',
        name: '教师层诊改报告'
    },
    {
        value: 'BG_LEVEL_XS',
        name: '学生层诊改报告'
    }
];

export default {
    props: {
        // 是否显示上传文件弹框
        uploadVisible: {
            type: Object
        },
        targetStandardId: {
            type: [String, Number]
        }
    },
    data () {
        // 上传文件验证规则
        var validFile = (rule, value, callback) => {
            if (this.fileForm.filePath === '') {
                return callback(new Error('请选择文件'));
            } else {
                callback();
            }
        };

        return {
            options,
            reportType: '',
            fileType: '',
            // 上传文件附带参数
            uploadData: {},
            // 保存文件上传信息对象
            fileForm: {
                // 报告所属层面
                reportIndex: '',
                // 报告所属角度
                rectificationRangeId: '',
                // 报告所属年度
                year: '',
                // 报告名称 ,
                reportName: '',
                // 编制部门
                preparationDepartment: '',
                // 报告文件描述
                reportFileDesc: '',
                // 文件路径
                filePath: '',
                fileType: '',
                note: ''
            },
            // 文件上传校验规则
            fileFormReuls: {
                filePath: [
                    { required: true, validator: validFile, trigger: 'blur' }
                ]
            },
            yearArr: this.$config.yearArr(),
            baseURL: this.baseURL
        };
    },
    created () {},
    mounted () {},
    methods: {
        handleSuccess (res, file) {
            console.log(res, 'file-=-=');
        },
        fileRemove () {
            this.fileList = {};
        },
        onExceed () {
            this.$message.error('请先移除下方已经上传的文件再重新上传！');
        },
        Upload (params) {
            const file = params.file;
            // 诊断报告
            const busType = 'report';
            // 文件类型
            var fileType = '';

            if (file.type.includes('image')) {
                fileType = 'image';
            } else {
                fileType = 'file';
            }
            this.fileType = fileType;

            const form = new FormData();
            form.append('file', file);
            form.append('busType', busType);
            form.append('fileType', fileType);
            uploadFile(form).then((res, res2) => {
                this.fileForm.filePath = res;
            });
        },
        closeDialog (formName) {
            this.$refs[formName].resetFields();
            this.$refs.upload.clearFiles();
        },
        handleFile () {
            if (this.reportType === '学校总体诊改报告') {
                return this.schoolAllReport;
            }
            return this.fileForm;
        },
        changeVal (val) {
            console.log(val, 'changeVal');
        },
        submitForm (formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    saveReportMaintain(this.handleFile()).then(res => {
                        this.$refs[formName].resetFields();
                        if (this.reportType !== 'schoolAllReport') {
                            this.fileForm.fileType = '';
                            this.fileForm.filePath = '';
                        }
                        this.uploadVisible.visible = false;
                        this.$emit('addReport');
                    });
                } else {
                    this.$message.error('请填写必填项！');
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.ruleForm {
    display: flex;
    flex-wrap: wrap;
}
.ruleForm .response {
    width: 100%;
}
.ruleForm .small {
    width: 50%;
}
</style>
